import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import App.Global 1.0
import "./qml_src/LeftPage"
import "./qml_src/RightPage"
import "./qml_src/ButtomPage"
import "./qml_src/CommonUI"
import "./qml_src/Global"

CommonUI {
    id:myWindow
    width: 1317
    height: 933

    //连接信号（登录弹窗）
    Connections{
        target: GlobalState
        function onOpenLoginPopup(){
            loginPopup.open()
        }
    }

    //左侧
    LeftPage{
        id:leftRect
        width:255
        anchors.top:parent.top
        anchors.bottom:bottomRect.top
        color: GlobalState.leftBgColor
    }

    //右侧
    RightPage{
        id:rightRect
        anchors.top:parent.top
        anchors.bottom:bottomRect.top
        anchors.left:leftRect.right
        anchors.right:parent.right
        color:GlobalState.rightBgColor
    }

    //下侧
    ButtomPage{
        id:bottomRect
        height:100
        anchors.bottom:parent.bottom
        anchors.left:parent.left
        anchors.right:parent.right
        color:GlobalState.bottomBgColor
    }

    //登录弹窗
    Popup{
        id:loginPopup
        anchors.centerIn: parent
        width: 466
        height: 638
        clip: true
        closePolicy: Popup.NoAutoClose  //禁止失焦时自动关闭
        onOpened: { //界面打开时重置状态
            chooseRect.imgState=0
        }
        background: Rectangle{
            color: "#1b1b23"
            radius: 10
            border.width: 1
            border.color: "#75777f"
            DebugBorder{}
            Image { //关闭图标
                id: closeImg
                source: "qrc:/res/loginArea/close.png"
                width: 25
                height: 25
                anchors.top: parent.top
                anchors.topMargin: 30
                anchors.right: parent.right
                anchors.rightMargin: 30
                DebugBorder{}
                //设置图片变更效果
                layer.enabled: false
                layer.effect: ColorOverlay{
                    source: closeImg
                    color: GlobalState.uiHoverColor
                }
                //设置鼠标悬停效果
                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape:Qt.PointingHandCursor
                    onEntered: {
                        closeImg.layer.enabled=true
                    }
                    onExited: {
                        closeImg.layer.enabled=false
                    }
                    onClicked: {
                        loginPopup.close()
                    }
                }
            }
            Label { //标题“扫码登陆”
                id:historyLabel
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 100
                text: "扫码登陆"
                color: GlobalState.uiDefaultColor
                font.bold: true
                font.pixelSize: 32
                font.family: "黑体"
                DebugBorder{}
            }
            Rectangle{  //两张照片展示区域
                id:chooseRect
                width: 400
                height: 400
                anchors.top: historyLabel.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                color: "transparent"
                property int imgState: 0        //0：两张照片同时展示；1：anyImg覆盖在前；2：qrImg覆盖在前
                property int aniTime: 500      //图片变更动画得时长
                property bool isAni: false      //标记当前是否在动画中
                DebugBorder{}
                Image{  //任意图片
                    id:anyImage
                    width: 150
                    height: width
                    x: 25
                    y: 125
                    opacity: 0.5
                    source: "qrc:/res/loginArea/ikunLogo.png"
                    transformOrigin: Item.TopLeft   // 让 scale 围绕左上角
                    fillMode: Image.PreserveAspectFit
                    smooth: true
                    DebugBorder{}
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            if(chooseRect.imgState===0 && !chooseRect.isAni){    //当前两者都处于mid，动画将any移至front，将qr移至back
                                chooseRect.isAni=true
                                anyMidBetweenFront.start()
                                qrBackBetweenMid.start()
                                chooseRect.imgState=1
                            }
                        }
                        onExited: {
                            if(chooseRect.imgState===1 && !chooseRect.isAni){    //当前any在front，qr在back，动画将any移至mid，将qr移至mid
                                chooseRect.isAni=true
                                anyMidBetweenFront.start()
                                qrBackBetweenMid.start()
                                chooseRect.imgState=0
                            }
                        }
                    }
                }
                Image{  //二维码
                    id:qrImage
                    width: 150
                    height: width
                    x: 225
                    y: 125
                    opacity: 0.5
                    source: "qrc:/res/loginArea/QRCode.png"
                    transformOrigin: Item.Top   // 让 scale 围绕左上角
                    fillMode: Image.PreserveAspectFit
                    smooth: true
                    DebugBorder{}
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            if(chooseRect.imgState===0 && !chooseRect.isAni){    //当前两者都处于mid，动画将any移至back，将qr移至front
                                chooseRect.isAni=true
                                anyBackBetweenMid.start()
                                qrMidBetweenFront.start()
                                chooseRect.imgState=2
                            }
                        }
                        onExited: {
                            if(chooseRect.imgState===2 && !chooseRect.isAni){    //当前qr在front，any在back，动画将any移至mid，将qr移至mid
                                chooseRect.isAni=true
                                anyBackBetweenMid.start()
                                qrMidBetweenFront.start()
                                chooseRect.imgState=0
                            }
                        }
                    }
                }
                Text {
                    id: anyText
                    visible: anyImage.width===300 || anyImage.width===150
                    width: anyImage.width
                    anchors.horizontalCenter: anyImage.horizontalCenter
                    y: anyImage.y + anyImage.height
                    wrapMode: Text.WrapAnywhere
                    textFormat: Text.RichText
                    font.pointSize: anyImage.width===300 ? 9 : 10
                    text:
                        "<span style='color:#ffffff;'>将鼠标划入两个照片以放大</span> " +
                        "<img src='qrc:/res/loginArea/star.png' width='16' height='16' style='vertical-align:middle;'>" +
                        "<a href='https://www.bilibili.com/video/BV1J4411v7g6/?vd_source=1f2d69d79214903797e2e27c77ae0b3d'"+
                        "style='color:#55aaff; text-decoration:underline;'>ikun网址</a> " +
                        "<img src='qrc:/res/loginArea/star.png' width='16' height='16' style='vertical-align:middle;'>" +
                        "<span style='color:#ffffff;'>(点击超链接以跳转)</span>"
                    DebugBorder{}
                    onLinkActivated: function(link) {   //点击富文本用浏览器打开网址
                        Qt.openUrlExternally(link)
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onPositionChanged: function(mouse) {
                            // 判断鼠标是否在链接上
                            if (anyText.linkAt(mouse.x, mouse.y) !== "") {
                                cursorShape = Qt.PointingHandCursor
                            } else {
                                cursorShape = Qt.ArrowCursor
                            }
                        }
                        onClicked: function(mouse) {
                            var link = anyText.linkAt(mouse.x, mouse.y)
                            if (link !== "")
                                Qt.openUrlExternally(link)
                        }
                    }
                }
                Text {
                    id: qrText
                    visible: qrImage.width===300 || qrImage.width===150
                    width: qrImage.width
                    anchors.horizontalCenter: qrImage.horizontalCenter
                    y: qrImage.y + qrImage.height
                    wrapMode: Text.WrapAnywhere
                    textFormat: Text.RichText
                    font.pointSize: qrImage.width===300 ? 9 : 10
                    text:
                        "<span style='color:#ffffff;'>如果你喜欢这个项目的话请到github点上一个</span> " +
                        "<img src='qrc:/res/loginArea/star.png' width='16' height='16' style='vertical-align:middle;'>" +
                        "<a href='https://github.com/lilin0218/QQ_replica_project_based_on_Qt5_in_CLion/tree/master'"+
                        "style='color:#55aaff; text-decoration:underline;'>github项目地址</a> " +
                        "<img src='qrc:/res/loginArea/star.png' width='16' height='16' style='vertical-align:middle;'>" +
                        "<span style='color:#ffffff;'>(点击超链接以跳转)</span>"
                    DebugBorder{}
                    onLinkActivated: function(link) {   //点击富文本用浏览器打开网址
                        Qt.openUrlExternally(link)
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onPositionChanged: function(mouse) {
                            // 判断鼠标是否在链接上
                            if (qrText.linkAt(mouse.x, mouse.y) !== "") {
                                cursorShape = Qt.PointingHandCursor
                            } else {
                                cursorShape = Qt.ArrowCursor
                            }
                        }
                        onClicked: function(mouse) {
                            var link = qrText.linkAt(mouse.x, mouse.y)
                            if (link !== "")
                                Qt.openUrlExternally(link)
                        }
                    }
                }
                ParallelAnimation{
                    id:anyMidBetweenFront   //针对anyImg，状态 0,1
                    //若状态为 0，则将any从mid移至front
                    NumberAnimation {
                        target: anyImage
                        property: "x"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 50 : 25
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: anyImage
                        property: "y"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 50 : 125
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: anyImage
                        property: "opacity"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 1 : 0.5
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: anyImage
                        property: "width"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 300 : 150
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: anyImage
                        property: "height"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 300 : 150
                        easing.type: Easing.OutBack
                    }
                    onFinished: {
                        console.log("整个序列动画完成:anyMidBetweenFront")
                        chooseRect.isAni=false
                    }
                }
                ParallelAnimation{
                    id:anyBackBetweenMid   //针对anyImg，状态 0,2
                    //若状态为 0，则将any从mid移至back
                    NumberAnimation {
                        target: anyImage
                        property: "x"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 200 : 25
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: anyImage
                        property: "y"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 200 : 125
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: anyImage
                        property: "opacity"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 0 : 0.5
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: anyImage
                        property: "width"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 0 : 150
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: anyImage
                        property: "height"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 0 : 150
                        easing.type: Easing.OutBack
                    }
                    onFinished: {
                        console.log("整个序列动画完成:qrMidBetweenFront")
                        chooseRect.isAni=false
                    }
                }

                ParallelAnimation{
                    id:qrMidBetweenFront   //针对qrImg，状态 0,2
                    //若状态为 0，则将qr从mid移至front
                    NumberAnimation {
                        target: qrImage
                        property: "x"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 50 : 225
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: qrImage
                        property: "y"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 50 : 125
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: qrImage
                        property: "opacity"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 1 : 0.5
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: qrImage
                        property: "width"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 300 : 150
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: qrImage
                        property: "height"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 300 : 150
                        easing.type: Easing.OutBack
                    }
                    onFinished: {
                        console.log("整个序列动画完成:qrMidBetweenFront")
                        chooseRect.isAni=false
                    }
                }
                ParallelAnimation{
                    id:qrBackBetweenMid   //针对qrImg，状态 0,1
                    //若状态为 0，则将qr从mid移至back
                    NumberAnimation {
                        target: qrImage
                        property: "x"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 200 : 225
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: qrImage
                        property: "y"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 200 : 125
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: qrImage
                        property: "opacity"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 0 : 0.5
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: qrImage
                        property: "width"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 0 : 150
                        easing.type: Easing.OutBack
                    }
                    NumberAnimation {
                        target: qrImage
                        property: "height"
                        duration: chooseRect.aniTime
                        to: chooseRect.imgState===0 ? 0 : 150
                        easing.type: Easing.OutBack
                    }
                    onFinished: {
                        console.log("整个序列动画完成:qrBackBetweenMid")
                        chooseRect.isAni=false
                    }
                }

                Text {
                    id: othersLogin
                    anchors.top: chooseRect.bottom
                    anchors.horizontalCenter: chooseRect.horizontalCenter
                    color: GlobalState.uiDefaultColor
                    font.pixelSize: 24
                    // font.family: "黑体"
                    text: "选择其他登录方式 >"
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            cursorShape = Qt.PointingHandCursor
                        }
                        onExited: {
                            cursorShape = Qt.ArrowCursor
                        }
                    }
                }
            }
        }
    }
}

